<template>
    <div class="appcontainer">
        <navtop :title="'首页'"></navtop>
        <div class="swiperContainer">
            <mt-swipe :auto="4000">
                <mt-swipe-item v-for="(item, index) in lunboimg" :key="index">
                    <img :src="item.url" alt="#img" />
                </mt-swipe-item>
            </mt-swipe>
        </div>
        <div class="goodlistContainer">
            <div
                @click="goDetial(item.id)"
                v-for="(item, index) in goodlists"
                :key="index"
                class="gooditem"
            >
                <img v-lazy="item.goodCoverImg" />
                <div class="gooddetailinfo">
                    <div class="goodname">{{item.goodName}}</div>
                    <div class="goodprice">{{item.goodPrice}}￥</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import navtop from "../navtop/nav.vue";
import { Indicator } from "mint-ui";
export default {
    data() {
        return {
            lunboimg: [
                {
                    url:
                        "https://res.vmallres.com/pimages//sale/2018-11/20181113114642803.png"
                },
                {
                    url:
                        "https://res.vmallres.com/pimages//sale/2018-12/pOwmi029iMQUw7hAMlXe.png"
                },
                {
                    url:
                        "https://res.vmallres.com/pimages//pages/adsImages/dv3JXYR1ouHUgIBjQdt4.jpeg"
                },
                {
                    url:
                        "https://res.vmallres.com/pimages//sale/2019-04/3LP39i3UdxwXc1ioiXFS.jpg"
                }
            ],
            goodlists: []
        };
    },
    methods: {
        // 获取所有商品列表
        
        getAllGoods() {
            Indicator.open({
                text: "加载中...",
                spinnerType: "fading-circle"
            });
            this.$ajax
                .get("goods/?limit=50")
                .then(res => {
                    //console.log(res.data);
                    this.goodlists = res.data.results;
                    Indicator.close();
                })
                .catch(err => {
                    Indicator.close();
                });
        },
        // 跳转到详细页
        goDetial(ids) {
            this.$router.push({ name: "gooddetails", params: { id: ids } }); // 这里使用路由传参的方式将id传到详细页
        },
        // 首页加载项
        loading() {
            let mytoken = window.localStorage.getItem("token");
            if (mytoken != null) {
                this.getFav();
                this.getShopcar();
                this.getOrder();
                this.getUserinfos();
            }
        },
        getFav() {
            this.$ajax.get("/fav?limit=50").then(res => {
                let favList = res.data.results;
                this.$store.commit("favStore", favList);
            });
        },
        //获取用户购物车数据存入store
        getShopcar() {
            this.$ajax.get("/shopcar/").then(res => {
                this.$store.commit("shopcarStore", res.data.results);
            });
        },
        //获取用户订单数据存入store
        getOrder() {
            this.$ajax.get("/order/").then(res => {
                this.$store.commit("orderStore", res.data.results);
            });
        },
        // 获取用户详细信息存入store
        getUserinfos() {
            this.$ajax.get("/user/").then(res => {
                this.$store.commit("userinfosStore", res.data);
            });
        }
    },
    mounted() {
        this.getAllGoods();
        this.loading();
    },
    components: {
        navtop
    }
};
</script>


<style lang="scss" scoped>
image[lazy="loading"] {
    width: 40px;
    height: 30px;
    margin: auto;
}
.appcontainer {
    .swiperContainer {
        width: 100%;
        height: 150px;
        margin-top: 2.5rem;

        img {
            display: inline-block;
            width: 100%;
            height: 150px;
        }
    }
    .goodlistContainer {
        display: flex;
        flex-wrap: wrap;
        .gooditem {
            width: 46%;
            margin: 5px;
            height: 230px;
            img {
                width: 100%;
                height: 200px;
            }
            .gooddetailinfo {
                text-align: center;
                .goodname {
                    font-size: 0.7rem;
                    color: #ccc;
                }
                .goodprice {
                    font-size: 0.8rem;
                    color: red;
                }
            }
        }
    }
}
</style>